<template>
  <div class="qy_xt" v-loading="isLoading">
    <div class="t_hand">
      <el-cascader
        style="float: left"
        size="small"
        @change="org_change"
        v-model="orgId"
        :options="jigou_1"
        :props="{
          label: 'Name',
          value: 'Id',
          children: 'Children',
          checkStrictly: true,
        }"
        clearable
      ></el-cascader
      ><span style="margin-left: -220px">县域慢病管理中心</span>
    </div>
    <el-row>
      <el-col :span="7" style="padding: 15px">
        <div style="padding: 15px">
          <p class="title mt20">慢病建档分析</p>
          <div style="width: 100%; height: 200px">
            <qiun-vue-ucharts
              type="bar"
              :opts="opts0"
              :chartData="chartData0"
            />
          </div>
          <p class="title mt50">慢病占比分析</p>
          <div style="width: 100%; height: 250px; margin-top: 25px">
            <qiun-vue-ucharts
              type="pie"
              :opts="opts1"
              :chartData="chartData1"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="17" style="padding: 15px; padding-left: 0px">
        <el-row>
          <el-col :span="15">
            <p class="title">数据概览</p>
            <div class="df">
              <span class="item_span tac cf bgc1">
                <span class="fw700">高危人数</span> <br />
                <span class="fw700">{{ info.数据概览.高危人数 }}人</span>
              </span>
              <span class="item_span tac cf bgc2">
                <span class="fw700">建档人数</span> <br />
                <span class="fw700">{{ info.数据概览.建档人数 }}人</span>
              </span>
              <span class="item_span tac cf bgc3">
                <span class="fw700">规范管理人数</span> <br />
                <span class="fw700">{{ info.数据概览.规范人数 }}人</span>
              </span>
            </div>
            <p class="title mt20">管理情况分析</p>
            <div class="ke_box" style="height: 250px">
              <qiun-vue-ucharts
                type="mix"
                :opts="opts2"
                :chartData="chartData2"
              />
            </div>
          </el-col>
          <el-col :span="9" style="padding-left: 10px">
            <div style="padding: 10px">
              <el-table
                :data="info.机构数据"
                border
                style="width: 100%; background: rgb(95, 115, 185); color: #fff"
                height="375"
                :header-cell-style="{
                  background: 'rgb(95,115,185)',
                  color: '#fff',
                }"
                :row-style="{ background: 'rgb(95,115,185)', color: '#fff' }"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  prop="机构名称"
                  align="center"
                  label="机构名称"
                >
                </el-table-column>
                <el-table-column
                  prop="高危人数"
                  align="center"
                  width="80"
                  label="高危人数"
                >
                </el-table-column>
                <el-table-column
                  prop="建档人数"
                  align="center"
                  width="80"
                  label="建档人数"
                >
                </el-table-column>
                <el-table-column
                  prop="规范管理人数"
                  align="center"
                  width="120"
                  label="规范管理人数"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <p class="title mt10">机构管理分析</p>
        <div class="ke_box">
          <qiun-vue-ucharts type="mix" :opts="opts3" :chartData="chartData3" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
import qiunVueUcharts from "@qiun/vue-ucharts";
export default {
  components: {
    qiunVueUcharts,
  },
  data() {
    return {
      chartData0: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts0: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 30, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          boundaryGap: "justify",
          disableGrid: false,
          min: 0,
          axisLine: false,
          max: 40,
        },
        yAxis: {},
        extra: {
          bar: {
            type: "group",
            width: 30,
            meterBorde: 1,
            meterFillColor: "#FFFFFF",
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            linearType: "custom",
            barBorderCircle: true,
            seriesGap: 2,
            categoryGap: 2,
          },
        },
      },
      chartData1: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts1: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        fontColor: "#000",
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 25,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            linearType: "custom",
          },
        },
      },
      chartData2: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['mix'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts2: {
        color: [
          "#1890FF",
          "#1890FF",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {},
        textColor: "#000",
        fontColor: "#000",
        xAxis: {
          disableGrid: true,
          title: "",
          fontColor: "#000",
          axisLineColor: "#fff",
          titleFontColor: "#fff",
          titleOffsetX: -30,
        },
        yAxis: {
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: "dash",
          dashLength: 4,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              position: "right",
              title: "控制达标率",
              textAlign: "left",
              min: 0,
              max: 100,
            },
            {
              position: "left",
              title: "规范管理率",
              textAlign: "right",
              min: 0,
              max: 100,
            },
          ],
        },
        extra: {
          mix: {
            column: {
              width: 20,
            },
          },
        },
      },
      chartData3: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['mix'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts3: {
        color: [
          "#73C0DE",
          "#1890FF",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {},
        textColor: "#000",
        fontColor: "#000",
        xAxis: {
          disableGrid: true,
          title: "",
          fontColor: "#000",
          axisLineColor: "#fff",
          titleFontColor: "#fff",
          titleOffsetX: -30,
          rotateLabel: true,
          rotateAngle: 20,
        },
        yAxis: {
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: "dash",
          dashLength: 4,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              position: "right",
              title: "控制达标率",
              textAlign: "left",
              min: 0,
              max: 100,
            },
            {
              position: "left",
              title: "规范管理率",
              textAlign: "right",
              min: 0,
              max: 100,
            },
          ],
        },
        extra: {
          mix: {
            column: {
              width: 20,
            },
          },
        },
      },
      tableData_ycqk: [],
      jigou_1: [],
      orgId: 3015,
      info: {
        慢病建档分析: {
          gxy: 0,
          tnb: 0,
          ncz: 0,
          mxszb: 0,
          mzf: 0,
          gxb: 0,
        },
        慢病占比分析: {
          gxy: 0,
          tnb: 0,
          ncz: 0,
          mxszb: 0,
          mzf: 0,
          gxb: 0,
        },
        数据概览: {
          高危人数: 0,
          建档人数: 0,
          规范人数: 0,
        },
        管理情况分析: [],
        机构管理分析: [],
        机构数据: [],
      },
      isLoading: false,
    };
  },
  mounted() {
    this.getJg();
    this.getInfo();
  },
  methods: {
    getJg() {
      this.$get(baseUrl.mbIp + "/api/NPatient/GetOrganTree").then((res) => {
        this.jigou_1 = res.Data;
      });
    },
    getInfo() {
      if (!this.orgId) {
        this.$message({
          message: "请选择机构！",
          type: "warning",
        });
        return;
      }
      this.isLoading = true;
      this.$get(baseUrl.mbIp + "/api/Data/AreaTongJi/" + this.orgId).then(
        (res) => {
          if (res.StatusCode != 200) {
            this.$notify.error({
              title: "错误",
              message: res.Errors,
            });
            this.isLoading = false;
            return;
          }
          this.info = res.Data;
          this.setInfo();
        }
      );
    },
    setInfo() {
      this.getServerData0();
      this.getServerData1();
      this.getServerData2();
      this.getServerData3();
      this.isLoading = false;
    },
    getServerData0() {
      let res = {
        categories: [
          "高血压",
          "糖尿病",
          "冠心病",
          "脑卒中",
          "慢阻肺",
          "慢性肾病",
        ],
        series: [
          {
            name: "人数",
            data: [
              this.info.慢病占比分析.gxy,
              this.info.慢病占比分析.tnb,
              this.info.慢病占比分析.gxb,
              this.info.慢病占比分析.ncz,
              this.info.慢病占比分析.mzf,
              this.info.慢病占比分析.mxszb,
            ],
          },
        ],
      };
      this.chartData0 = JSON.parse(JSON.stringify(res));
    },
    getServerData1() {
      let res = {
        series: [
          {
            data: [
              { name: "高血压", value: this.info.慢病占比分析.gxy },
              { name: "糖尿病", value: this.info.慢病占比分析.tnb },
              { name: "冠心病", value: this.info.慢病占比分析.gxb },
              { name: "脑卒中", value: this.info.慢病占比分析.ncz },
              { name: "慢阻肺", value: this.info.慢病占比分析.mzf },
              { name: "慢性肾病", value: this.info.慢病占比分析.mxszb },
            ],
          },
        ],
      };
      this.chartData1 = JSON.parse(JSON.stringify(res));
    },
    getServerData2() {
      var list_t = [];
      var list_v1 = [];
      var list_v2 = [];
      for (var i in this.info.管理情况分析) {
        list_t.push(this.info.管理情况分析[i].Name);
        list_v1.push(this.info.管理情况分析[i].规范管理率);
        list_v2.push(this.info.管理情况分析[i].控制达标率);
      }
      let res = {
        categories: list_t,
        series: [
          {
            name: "规范管理率",
            index: 1,
            type: "column",
            data: list_v1,
          },
          {
            name: "控制达标率",
            type: "line",
            color: "#FAC858",
            data: list_v2,
          },
        ],
      };
      this.chartData2 = JSON.parse(JSON.stringify(res));
    },
    getServerData3() {
      var list_t = [];
      var list_v1 = [];
      var list_v2 = [];
      for (var i in this.info.机构管理分析) {
        list_t.push(this.info.机构管理分析[i].机构名称);
        list_v1.push(this.info.机构管理分析[i].规范管理率);
        list_v2.push(this.info.机构管理分析[i].控制达标率);
      }
      let res = {
        categories: list_t,
        series: [
          {
            name: "规范管理率",
            index: 1,
            type: "column",
            data: list_v1,
          },
          {
            name: "控制达标率",
            type: "line",
            color: "#FAC858",
            data: list_v2,
          },
        ],
      };
      this.chartData3 = JSON.parse(JSON.stringify(res));
    },
    org_change(val) {
      this.orgId = val[val.length - 1];
      this.getInfo();
    },
    tableRowClassName({ row }) {
      return "custom-row-class"; // 这里返回一个类名，所有行都会应用这个类名，你也可以根据row中的数据条件判断返回不同类名
    },
  },
};
</script>
  
  <style scoped lang='scss'>
.qy_xt {
  height: calc(100vh - 46px);
  // background-color: rgb(5, 13, 75);
  background-color: #fff;
  .t_hand {
    height: 70px;
    //   background-image: url("../../assets/b_hand.png");
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-position: center; /* 背景图片居中 */
    color: #000;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    padding-top: 20px;
  }
  .title {
    color: #000;
    font-size: 14px;
    font-weight: 700;
  }
  .item_span {
    display: inline-block;
    width: 200px;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
    font-size: 16px;
  }
  .ke_box {
    border: 1px solid #fff;
    padding: 15px;
    height: 208px;
  }
  .w50 {
    width: 50%;
    display: inline-block;
    text-align: center;
  }
  .icon {
    color: rgb(96, 150, 230);
    font-size: 40px;
  }
  .dsib {
    display: inline-block;
  }
  .tar {
    text-align: right;
  }
  .cf {
    color: #fff;
  }
  .fz18 {
    font-size: 18px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mt50 {
    margin-top: 50px;
  }
  .w100 {
    width: 100px;
  }
  .df {
    display: flex;
    justify-content: space-between;
  }
  .bgc1 {
    background-color: rgb(30, 120, 215);
  }
  .bgc2 {
    background-color: rgb(95, 100, 200);
  }
  .bgc3 {
    background-color: rgb(215, 75, 70);
  }
  .bgc4 {
    background-color: rgb(80, 200, 150);
  }
  .fw700 {
    font-weight: 700;
  }
}
::v-deep .el-table__empty-text {
  color: #fff;
}
::v-deep .custom-row-class:hover {
  background-color: rgb(
    95,
    115,
    185
  ) !important; /* 设置鼠标悬停的背景色，可按需更改 */
  color: #fff !important;
}
::v-deep.el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: rgb(
    95,
    115,
    185
  ) !important; /* 设置鼠标悬停的背景色，可按需更改 */
  color: #fff !important;
}
</style>
  